<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>详情页</title>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
		<link rel="stylesheet" type="text/css" href="css/proList.css"/>
		<style type="text/css">
		  .categ .fl.on{
			border:2px solid #C10000;
			}
			.categ .fl{
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<!------------------------------head------------------------------>
		<div class="head">
			<div class="wrapper clearfix">
				<div class="clearfix" id="top">
					<h1 class="fl"><a href="index.jsp"><img src="img/logo.png"/></a></h1>
					<div class="fr clearfix" id="top1">
						<c:if test="${not empty loginUser }">
						<p class="fl">欢迎你:${loginUser.name }</p>
					</c:if>
					<c:if test="${empty loginUser }">
						<p class="fl">
							<a href="login.jsp" id="login">登录</a> <a href="reg.jsp" id="reg">注册</a>
						</p>
					</c:if>
						<!-- <form action="#" method="get" class="fl">
							<input type="text" placeholder="搜索" />
							<input type="button" />
						</form> -->
						<div class="btn fl clearfix">
							<a href="mygxin.jsp"><img src="img/grzx.png"/></a>
							<a href="#" class="er1"><img src="img/ewm.png"/></a>
							<a href="findShopcarts.do"><img src="img/gwc.png"/></a>
							<p><a href="#"><img src="img/smewm.png"/></a></p>
						</div>
					</div>
				</div>
				<ul class="clearfix" id="bott">
				<li><a href="index.jsp">首页</a></li>
				<c:forEach items="${listFl}" var="f">
					<li><a href="AllIndexProduct.do?tid=${f.id}">${f.type_name }</a>
						<div class="sList2">
							<div class="clearfix">
							<c:forEach items="${f.sonlist}" var="son">
								<a href="AllIndexProduct.do?tid=${son.id}">${son.type_name }</a>
							</c:forEach>
							</div>
						</div>
					</li>
				</c:forEach>
			</ul>
			</div>
		</div>
		<!-----------------address------------------------------->
		<div class="address">
			<div class="wrapper clearfix">
				<a href="index.jsp">首页</a>
				<span>/</span>
				<a href="flowerDer.jsp">${product.name }</a>
				<span>/</span>
				<a href="proList.jsp">${product.name }</a>
				<span>/</span>
				<a href="#" class="on">【${product.name }】${product.name }</a>
			</div>
		</div>
		<!-----------------------Detail------------------------------>
		<div class="detCon">
			<div class="proDet wrapper">
				<div class="proCon clearfix">
					<div class="proImg fl">
						<img class="det" src="../${product.imgMain }" />
						<div class="smallImg clearfix">
							<img src="../${product.imgMain }" data-src="../${product.imgFu }">
							<img src="../${product.imgMain }" data-src="../${product.imgFu }">
							<img src="../${product.imgMain }" data-src="../${product.imgFu }">
							<img src="../${product.imgMain }" data-src="../${product.imgFu }">
						</div>
					</div>
					<div class="fr intro">
						<div class="title">
							<h4>【${product.typeName }】${product.name } </h4>
							<p>【${product.texture }】【${product.shape }】【${product.stone_material }】【${product.factory }】【${product.cate }】</p>
							<span>${product.newPrice }</span>
						</div>
						<div class="proIntro">
							<p>颜色分类</p>
							<div class="smallImg clearfix categ">
							<c:forEach items="${sizeArr }" var="s">
							<p class="fl" mysize=${s }>${s }</p>
							</c:forEach>
								
							</div>
							<p>数量&nbsp;&nbsp;库存<span>${product.storage }</span>件</p>
							<div class="num clearfix">
								<img class="fl sub" src="img/temp/sub.jpg">
								<span class="fl" contentEditable="true" id="count">1</span>
								<img class="fl add" src="img/temp/add.jpg">
								<p class="please fl">请选择商品属性!</p>
							</div>
						</div>
						<div class="btns clearfix">
							<!-- <a href="#2"><p class="buy fl">立即购买</p></a>
							<a href="#2"><p class="cart fr">加入购物车</p></a> -->
							<a href="#2"><p class="cart fl">加入购物车</p></a>
							<input type="hidden" id="pid" value="${product.id }">
							<input type="hidden" id="pname" value="${product.name }">
							<input type="hidden" id="pimg" value="${product.imgMain }">
							<input type="hidden" id="price" value="${product.newPrice }">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="introMsg wrapper clearfix">
			<div class="msgL fl">
				<div class="msgTit clearfix">
					<a class="on">商品详情</a>
					<a>所有评价</a>
				</div>
				<div class="msgAll">
					<div class="msgImgs">
						<img src="../${product.imgMain }">
						<img src="../${product.imgMain }">
						<img src="../${product.imgMain }">
						<img src="../${product.imgMain }">
						<img src="../${product.imgMain }">
						<img src="../${product.imgMain }">
						<img src="../${product.imgMain }">
					</div>
					<div class="eva">
					
					<c:forEach items="${comments }" var="c">
					  <div class="per clearfix">
							<img class="fl" src="../images/${c.img }" width="26" height="26">
							<div class="perR fl">
								<p>${c.uName }</p>
								<p>${c.content }</p>
								<p>商品符合描述等级:
								<c:if test="${c.accordRating eq 1 }">
								☆
								</c:if>
								<c:if test="${c.accordRating eq 2 }">
								☆☆
								</c:if>
								<c:if test="${c.accordRating eq 3 }">
								☆☆☆
								</c:if>
								<c:if test="${c.accordRating eq 4 }">
								☆☆☆☆
								</c:if>
								<c:if test="${c.accordRating eq 5 }">
								☆☆☆☆☆
								</c:if>
								</p>
								<p>物流等级：
								<c:if test="${c.expressRating eq 1 }">
								☆
								</c:if>
								<c:if test="${c.expressRating eq 2 }">
								☆☆
								</c:if>
								<c:if test="${c.expressRating eq 3 }">
								☆☆☆
								</c:if>
								<c:if test="${c.expressRating eq 4 }">
								☆☆☆☆
								</c:if>
								<c:if test="${c.expressRating eq 5 }">
								☆☆☆☆☆
								</c:if>
							    </p>
								<p>服务等级：
								<c:if test="${c.serverRating eq 1 }">
								☆
								</c:if>
								<c:if test="${c.serverRating eq 2 }">
								☆☆
								</c:if>
								<c:if test="${c.serverRating eq 3 }">
								☆☆☆
								</c:if>
								<c:if test="${c.serverRating eq 4 }">
								☆☆☆☆
								</c:if>
								<c:if test="${c.serverRating eq 5 }">
								☆☆☆☆☆
								</c:if>
								</p>
								<p><span>${c.createTime }</span></p>
							</div>
							<c:if test="${c.isReply eq 1 }">
							<div class="perR fl">
							 <p>回复</p>
							<p style="color : blue">${c.reply }</p>
							<p style="color : blue"><span>${c.replyTime }</span></p>
							</div>
							</c:if>
							
						</div>
					</c:forEach>
						</div>
					</div>
				</div>
			</div>
		<div class="like">
			<h4>猜你喜欢</h4>
			<div class="bottom">
				<div class="hd">
					<span class="prev"><img src="img/temp/prev.png"></span>
					<span class="next"><img src="img/temp/next.png"></span>
				</div>
				<div class="imgCon bd">
					<div class="likeList clearfix">
						<div>
						
						<c:forEach items="${tjList }" var="t">
						<a href="findAll.do?id=${t.id }">
								<dl>
									<dt><img src="../${t.imgMain }" width="216" height="216"></dt>
									<dd>【${t.typeName }】 ${t.name }</dd>
									<dd>￥${t.newPrice }</dd>
								</dl>
							</a>
						</c:forEach>
							
						</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--返回顶部-->
		<div class="gotop">
			<a href="cart.jsp">
			<dl class="goCart">
				<dt><img src="img/gt1.png"/></dt>
				<dd>去购<br />物车</dd>
				<span>1</span>
			</dl>
			</a>
			<a href="#" class="dh">
			<dl>
				<dt><img src="img/gt2.png"/></dt>
				<dd>联系<br />客服</dd>
			</dl>
			</a>
			<a href="mygxin.jsp">
			<dl>
				<dt><img src="img/gt3.png"/></dt>
				<dd>个人<br />中心</dd>
			</dl>
			</a>
			<a href="#" class="toptop" style="display: none;">
			<dl>
				<dt><img src="img/gt4.png"/></dt>
				<dd>返回<br />顶部</dd>
			</dl>
			</a>
			<p>400-800-8200</p>
		</div>
		<div class="msk"></div>
		<!--footer-->
		<div class="footer">
			<div class="top">
				<div class="wrapper">
					<div class="clearfix">
						<a href="#2" class="fl"><img src="img/foot1.png"/></a>
						<span class="fl">7天无理由退货</span>
					</div>
					<div class="clearfix">
						<a href="#2" class="fl"><img src="img/foot2.png"/></a>
						<span class="fl">15天免费换货</span>
					</div>
					<div class="clearfix">
						<a href="#2" class="fl"><img src="img/foot3.png"/></a>
						<span class="fl">满599包邮</span>
					</div>
					<div class="clearfix">
						<a href="#2" class="fl"><img src="img/foot4.png"/></a>
						<span class="fl">手机特色服务</span>
					</div>
				</div>
			</div>
			<p class="dibu">最家家居&copy;2013-2017公司版权所有 京ICP备080100-44备0000111000号<br />
			违法和不良信息举报电话：188-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
		</div>
		<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/nav.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/pro.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/detailCart.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			jQuery(".bottom").slide({titCell:".hd ul",mainCell:".bd .likeList",autoPage:true,autoPlay:false,effect:"leftLoop",autoPlay:true,vis:1});
			$(".categ p").click(function(){
	     		$(this).addClass("on").siblings().removeClass("on");
	     	})
	     	$(".btns a").click(function(){
			if($(".categ p").hasClass("on")){
				if($(this).children().hasClass("cart")){
					
					var size='';
					$(".categ p").each(function () {
						var sc = $(this).hasClass("on");
						if (sc) {
							size = $(this).attr("mysize");
						}
						
					});
					
					$.ajax({
			      		  type:'post',//提交方式
			      		  url:'addShopcart.do',//url
			      		  data:{
			      			"pro_id":$("#pid").val(),
			      			"name":$("#pname").val(),
			      			"img":$("#pimg").val(),
			      			"price":$("#price").val(),
			      			"size":size,
			      			"count":$("#count").text()
			      		  		},
			      		  dataType:'json',//返回数据格式
			      		  success:function(rsl){//成功返回之后的调用
			      			  //提示信息
			      			  alert(rsl.msg);
			      			 //加入购物车成功后返回首页
			      		      /* if(rsl.code == 0){
			      		    	location.href="index.do";
			      		      } */
			      			  
			      		  },
			      		  error:function(){
			      			  alert("系统异常！！")
			      		  }
			      	  });
					
				}
				$(".proIntro").css("border","none");
				$(".num .please").hide();
			}else{
				$(".proIntro").css("border","1px solid #c10000");
				$(".num .please").show();
			}
		})
		</script>
	</body>
</html>
